<template>
  <master :title="title">
    <listpage ref="listpage"></listpage>
    <modal :confirm-box-style="contentStyle" title="新增内容" :visible="show">
      这是一个自定义内容弹出框
    </modal>

    <!-- vis关系图基础展示 -->



    <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
      <span>
        <div id="mynetwork" style="width:100%; height:500px;border:1px solid #ccc;"></div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </master>
</template>
<script type="text/javascript">
  (function (G) {
    var _this = null;
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master",///母版组件
        "listpage": "/components/List/Page/Page",///通用列表组件
        "modal": "/components/Modal/Modal"
      },
      "enablePullDownRefresh": true
    }, G.modelList({///配置listpage组件
      modelName: 'sp_course',///entity名称
      title: '课程列表',
      listPage(list, query) {///query为前一个页面传过来的参数
        let type = query.type
        // list.getUrl = '/api/model/v_course?join=user';///列表请求API
        list.getUrl = '/api/model/sp_course';///列表请求API
        if (query.type) list.getUrl += '&type=' + query.type
        list.searchKey = 'title,createTime,createTimeEND'///搜索字段，来源于列表数据模型
        list.models.createTime = {
          label: '发布时间',
          unList: true,
          type: 'datetime'
        }
        list.models.createTimeEND = {
          label: '结束时间',
          unList: true,
          type: 'datetime'
        }
        ///list.canCheck = false ///取消选中按钮 同时取消批量删除
        ///list.canBack = true ///添加返回上一页按钮
        ///list.actions.add = false ///取消新增按钮
        ///list.actions.delet = undefined ///取消行删除按钮
        ///list.actions.edit = undefined ///取消行修改按钮
        // list.models = {/// 列表数据模型，默认使用后台返回对应的模型
        //   id:{
        //     label:'编号'
        //   }
        // }
        // list.addDataChange = function(item,i){///数据监听回掉
        //   if(item.isNew) {
        //     item.dis_push = true///此行去掉推送按钮
        //   }
        // }
        list.actions.detail1 = {///定义操作按钮，默认存在修改和删除
          name: '知识图谱',///按钮名称
          action(event) {///点击回调
            console.log("知识图谱", event);
            // log("_this.dialogVisible", _this.dialogVisible);
            _this.dialogVisible = true
            _this.initNetwork(); // 弹窗打开时初始化网络图

          }
        }
      },
      modeleditquery(edit, event, query) {///编辑页面 edit对象，event事件，query前一个页面传过来的参数
        if (query.type) {
          edit.values.type = query.type
          edit.models.type.type = ''
        }
        edit.models.createTime.type = ''
        edit.models.createTimeEND.type = ''
        // edit.models = {///编辑数据模型，默认使用后台返回的对应模型
        //   title:{
        //     label:'标题',
        //     type:'input'
        //   }
        // }
        ///edit.readOnly = true ///设置页面只读
        ///edit.meth = 'PUT' ///请求方式
        ///edit.url = '/api/model/article' ///请求地址
      }
    }, {
      data: {
        contentStyle: '',
        show: false,
        /* 11111111111111111111vis知识图谱1111111111111111111111 */
        nodes: new vis.DataSet([
          // { id: 1, label: "Node 1" },
          // { id: 2, label: "Node 2" },
          // { id: 3, label: "Node 3" },
          // { id: 4, label: "Node 4" },
          // { id: 5, label: "Node 5" },
        ]),
        edges: new vis.DataSet([
          // { from: 1, to: 3 },
          // { from: 1, to: 2 },
          // { from: 2, to: 4 },
          // { from: 2, to: 5 },
          // { from: 3, to: 3 },
        ]),
        dialogVisible: false
        /* 11111111111111111111vis知识图谱1111111111111111111111 */
      },
      methods: {
        /* 11111111111111111111111111111111111vis知识图谱11111111111111111111111111111111111111111111 */
        getNetList() {
          G.get('{JAVAURL}/sp-chapter/list1').then((res) => {
            console.log("getNetList(res)", res);
            res.data.map(item => {
              // this.nodes = new vis.DataSet([]);
              this.nodes.add({ id: item.id, label: item.name });
            })
            res.data.map(item => {
              // this.edges = new vis.DataSet([]);
              this.edges.add({ from: item.id, to: item.parentId });
            })
            // console.log("this.nodes", this.nodes);
            // console.log("this.edges", this.edges);

          });
        },
        initNetwork() {
          this.$nextTick(() => {
            // 确保网络图初始化在弹窗显示时执行
            const container = document.getElementById("mynetwork");
            if (container) {
              const data = {
                nodes: this.nodes,
                edges: this.edges,
              };
              const options = {
                layout: {
                  hierarchical: {
                    direction: "DU", // 从上到下 (UD = Up to Down)
                    sortMethod: "directed", // 按方向排列
                    nodeSpacing: 300, // 节点间距
                    levelSeparation: 200, // 层间距
                  },
                },
                nodes: {
                  shape: "box",
                  font: {
                    size: 12,
                    multi: true,
                  },
                  widthConstraint: {
                    maximum: 200,
                  },
                  heightConstraint: {
                    minimum: 30,
                  },
                },
                edges: {
                  arrows: {
                    to: { enabled: true, scaleFactor: 0.5 },
                  },
                  color: "#848484",
                  width: 2,
                  hoverWidth: 4,
                },
                physics: {
                  barnesHut: {
                    gravitationalConstant: -2000,
                    centralGravity: 0.3,
                    springLength: 150,
                    springConstant: 0.04,
                  },
                  stabilization: {
                    iterations: 150,
                  },
                },
                interaction: {
                  hover: true,
                  navigationButtons: true,
                  zoomView: true,
                },
              };

              new vis.Network(container, data, options);
            } else {
              console.error("容器元素 #mynetwork 未找到");
            }
          });
        },

        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => { });
        },
        /* 111111111111111111111111111111111111vis知识图谱1111111111111111111111111111111111111111111 */

      },
      mounted: function (query) {
        _this = this,
          this.getNetList();


      }
    }));
  })(Y)
</script>
<style scoped>

</style>